<template>
 <div>
   <div>筛选查询
   <el-select v-model="value" placeholder="请选择项目">
       <el-option
         v-for="item in Allproject"
         :key="item.projectId"
         :label="item.projectName"
         :value="item.projectName">
       </el-option>
     </el-select>
     <div class="block" style="float: right; position: relative;right: 700px;">
       <span class="demonstration">开始时间</span>
       <el-date-picker
         v-model="value1"
         type="date"
         placeholder="选择日期">
       </el-date-picker>
     </div>
     <div class="block" style="float: right;position: relative;right: 120px;">
       <span class="demonstration">结束时间</span>
       <el-date-picker
         v-model="value2"
         align="right"
         type="date"
         placeholder="选择日期"
         >
       </el-date-picker>
     </div> <el-button style="float: right; position: relative; left: 270px;" @click="selByCondition()">查询</el-button></div>
   <div id="main" style="width: 600px;height:400px;">

   </div>
 </div>
</template>

<script>
  export default{
    name:"defecttypepro",
    data(){
      return{
      Allproject:[],
      value:"",
      value1:"",
      value2:"",
      data1:[]
      }
    },
    methods:{
      init:function(){

      var chartDom = document.getElementById('main');
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        toolbox: {
        　　show: true,
        　　feature: {
        　　　　saveAsImage: {
        　　　　show:true,
        　　　　excludeComponents :['toolbox'],
        　　　　pixelRatio: 2
        　　　　}
        　　}
        },
        title: {
          text: '缺陷分类占比',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '缺陷分类占比',
            type: 'pie',
            radius: '50%',
            data:this.data1,
             // [
            //   { value: 200, name: '功能' },
            //   { value: 50, name: '界面' },
            //   { value: 100, name: '逻辑' },
            //   { value: 400, name: '未满足需求' },

            // ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
      getAllProjects(){
        this.$http.get("projectInfo/getAllProject").then(resp=>{
          this.Allproject=resp.data.data
        })
      },
      getAllTypeCount(){
        this.$http.get("defectRecord/getAllTypeCount").then(resp=>{
          this.data1=resp.data.data

          this.init()
        })
      },
    selByCondition(){
      this.$http.post("defectRecord/getTypeCount",{"projectName":this.value,
                                                     "startTime":this.value1,
                                                     "endTime":this.value2
       }).then(resp=>{
        this.data1=resp.data.data
        
        this.init()
      })
    }

},
created() {
  this.getAllProjects()
  this.getAllTypeCount()

},
mounted() {
  this.init()
}
  }
</script>

<style>
</style>
